<!DOCTYPE html>
<html>

	<head>
		<!-- Standard Meta -->
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

		<!-- Site Properities -->
		<meta name="generator" content="DocPad v6.79.4" />
		<title>Sticky | Semantic UI</title>

		<meta name="description" content="Sticky content fixes itself to the browser viewport as content is scrolled" />
		<meta name="keywords" content="html5, ui, library, framework, javascript" />

		<script src="../resources/libs/detect.min.js"></script>
		<script src="../resources/libs/jquery.min.js"></script>
		<script src="../resources/libs/clipboard-polyfill.js"></script>
		<script src="../resources/libs/cookies.js"></script>
		<script src="../resources/libs/jquery.easing.1.3.js"></script>
		<script src="../resources/libs/highlight.js"></script>
		<script src="../resources/libs/jquery.history.js"></script>
		<script src="../resources/libs/tablesort.min.js"></script>

	    <script src="../resources/dist/semantic.js"></script>

		<script src="../resources/js/docs.js"></script>

		<link rel="stylesheet" type="text/css" class="ui" href="../resources/dist/semantic.css">

		<link rel="stylesheet" type="text/css" href="../resources/css/docs.css">
		<link rel="stylesheet" type="text/css" href="../resources/css/rtl.css">

		<script>
			(function(i, s, o, g, r, a, m) {
				i['GoogleAnalyticsObject'] = r;
				i[r] = i[r] || function() {
					(i[r].q = i[r].q || []).push(arguments)
				}, i[r].l = 1 * new Date();
				a = s.createElement(o),
					m = s.getElementsByTagName(o)[0];
				a.async = 1;
				a.src = g;
				m.parentNode.insertBefore(a, m)
			})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

			ga('create', 'UA-44039803-2', 'auto');
			ga('send', 'pageview');
		</script>

		<script type="text/javascript">
			window.liveSettings = {
				api_key: '9ede3015b9f84c1aabc81ab839c55d74',
				parse_attr: [
					'data-title',
					'data-content'
				],
				detectlang: false,
				autocollect: true,
				ignore_tags: ['i', 'code', 'pre'],
				parse_attr: ['data-title', 'data-content', 'data-text'],
				ignore_class: ['code', 'anchor']
			};
		</script>
		<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>

	</head>

	<body id="example" class="basic minimal" ontouchstart="">

		<div class="ui vertical inverted sidebar menu" id="toc">

			<div class="item">
				<a class="ui logo icon image" href="/">
					<img src="/images/logo.png">
				</a>
				<a href="/"><b>UI Docs</b></a>
			</div>
			<a class="item" href="/introduction/getting-started.html">
				<b>Getting Started</b>
			</a>
			<a class="item" href="/introduction/new.html">
				<b>New in 2.2</b>
			</a>
			<div class="item">
				<div class="header">Introduction</div>
				<div class="menu">

					<a class="item" href="/introduction/integrations.html">
						Integrations
					</a>

					<a class="item" href="/introduction/build-tools.html">
						Build Tools
					</a>

					<a class="item" href="/introduction/advanced-usage.html">
						Recipes
					</a>

					<a class="item" href="/introduction/glossary.html">
						Glossary
					</a>

				</div>
			</div>
			<div class="item">
				<div class="header">Usage</div>
				<div class="menu">

					<a class="item" href="/usage/theming.html">
						Theming
					</a>

					<a class="item" href="/usage/layout.html">
						Layouts
					</a>

				</div>
			</div>
			<div class="item">
				<div class=" header">Globals</div>
				<div class="menu">

					<a class="item" href="/globals/reset.html">
						Reset

					</a>

					<a class="item" href="/globals/site.html">
						Site

					</a>

				</div>
			</div>
			<div class="item">
				<div class=" header">Elements</div>
				<div class="menu">

					<a class="item" href="/elements/button.html">
						Button

					</a>

					<a class="item" href="/elements/container.html">
						Container

					</a>

					<a class="item" href="/elements/divider.html">
						Divider

					</a>

					<a class="item" href="/elements/flag.html">
						Flag

					</a>

					<a class="item" href="/elements/header.html">
						Header

					</a>

					<a class="item" href="/elements/icon.html">
						Icon

					</a>

					<a class="item" href="/elements/image.html">
						Image

					</a>

					<a class="item" href="/elements/input.html">
						Input

					</a>

					<a class="item" href="/elements/label.html">
						Label

					</a>

					<a class="item" href="/elements/list.html">
						List

					</a>

					<a class="item" href="/elements/loader.html">
						Loader

					</a>

					<a class="item" href="/elements/rail.html">
						Rail

					</a>

					<a class="item" href="/elements/reveal.html">
						Reveal

					</a>

					<a class="item" href="/elements/segment.html">
						Segment

					</a>

					<a class="item" href="/elements/step.html">
						Step

					</a>

				</div>
			</div>
			<div class="item">
				<div class=" header">Collections</div>
				<div class="menu">

					<a class="item" href="/collections/breadcrumb.html">
						Breadcrumb

					</a>

					<a class="item" href="/collections/form.html">
						Form

					</a>

					<a class="item" href="/collections/grid.html">
						Grid

					</a>

					<a class="item" href="/collections/menu.html">
						Menu

					</a>

					<a class="item" href="/collections/message.html">
						Message

					</a>

					<a class="item" href="/collections/table.html">
						Table

					</a>

				</div>
			</div>
			<div class="item">
				<div class=" header">Views</div>
				<div class="menu">

					<a class="item" href="/views/advertisement.html">
						Advertisement

					</a>

					<a class="item" href="/views/card.html">
						Card

					</a>

					<a class="item" href="/views/comment.html">
						Comment

					</a>

					<a class="item" href="/views/feed.html">
						Feed

					</a>

					<a class="item" href="/views/item.html">
						Item

					</a>

					<a class="item" href="/views/statistic.html">
						Statistic

					</a>

				</div>
			</div>
			<div class="item">
				<div class="active  header">Modules</div>
				<div class="menu">

					<a class="item" href="/modules/accordion.html">
						Accordion

					</a>

					<a class="item" href="/modules/checkbox.html">
						Checkbox

					</a>

					<a class="item" href="/modules/dimmer.html">
						Dimmer

					</a>

					<a class="item" href="/modules/dropdown.html">
						Dropdown

					</a>

					<a class="item" href="/modules/embed.html">
						Embed

					</a>

					<a class="item" href="/modules/modal.html">
						Modal

					</a>

					<a class="item" href="/modules/nag.html">
						Nag

					</a>

					<a class="item" href="/modules/popup.html">
						Popup

					</a>

					<a class="item" href="/modules/progress.html">
						Progress

					</a>

					<a class="item" href="/modules/rating.html">
						Rating

					</a>

					<a class="item" href="/modules/search.html">
						Search

					</a>

					<a class="item" href="/modules/shape.html">
						Shape

					</a>

					<a class="item" href="/modules/sidebar.html">
						Sidebar

					</a>

					<a class="active item" href="/modules/sticky.html">
						Sticky

					</a>

					<a class="item" href="/modules/tab.html">
						Tab

					</a>

					<a class="item" href="/modules/transition.html">
						Transition

					</a>

				</div>
			</div>
			<div class="item">
				<div class=" header">Behaviors</div>
				<div class="menu">

					<a class="item" href="/behaviors/api.html">
						API

					</a>

					<a class="item" href="/behaviors/form.html">
						Form Validation

					</a>

					<a class="item" href="/behaviors/visibility.html">
						Visibility

					</a>

				</div>
			</div>

		</div>

		<div class="ui black big launch right attached fixed button">
			<i class="content icon"></i>
			<span class="text">Menu</span>
		</div>

		<div class="ui fixed inverted main menu">
			<div class="ui container">
				<a class="launch icon item">
					<i class="content icon"></i>
				</a>

				<div class="item">
					Sticky
				</div>

				<div class="right menu">

					<div class="vertically fitted borderless item">
						<iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
					</div>

					<!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
				</div>
			</div>
		</div>

		<div class="pusher">
			<div class="full height">
				<div class="toc">
					<div class="ui vertical inverted sticky menu">

						<div class="item">
							<a class="ui logo icon image" href="/">
								<img src="/images/logo.png">
							</a>
							<a href="/"><b>UI Docs</b></a>
						</div>
						<a class="item" href="/introduction/getting-started.html">
							<b>Getting Started</b>
						</a>
						<a class="item" href="/introduction/new.html">
							<b>New in 2.2</b>
						</a>
						<div class="item">
							<div class="header">Introduction</div>
							<div class="menu">

								<a class="item" href="/introduction/integrations.html">
									Integrations
								</a>

								<a class="item" href="/introduction/build-tools.html">
									Build Tools
								</a>

								<a class="item" href="/introduction/advanced-usage.html">
									Recipes
								</a>

								<a class="item" href="/introduction/glossary.html">
									Glossary
								</a>

							</div>
						</div>
						<div class="item">
							<div class="header">Usage</div>
							<div class="menu">

								<a class="item" href="/usage/theming.html">
									Theming
								</a>

								<a class="item" href="/usage/layout.html">
									Layouts
								</a>

							</div>
						</div>
						<div class="item">
							<div class=" header">Globals</div>
							<div class="menu">

								<a class="item" href="/globals/reset.html">
									Reset

								</a>

								<a class="item" href="/globals/site.html">
									Site

								</a>

							</div>
						</div>
						<div class="item">
							<div class=" header">Elements</div>
							<div class="menu">

								<a class="item" href="/elements/button.html">
									Button

								</a>

								<a class="item" href="/elements/container.html">
									Container

								</a>

								<a class="item" href="/elements/divider.html">
									Divider

								</a>

								<a class="item" href="/elements/flag.html">
									Flag

								</a>

								<a class="item" href="/elements/header.html">
									Header

								</a>

								<a class="item" href="/elements/icon.html">
									Icon

								</a>

								<a class="item" href="/elements/image.html">
									Image

								</a>

								<a class="item" href="/elements/input.html">
									Input

								</a>

								<a class="item" href="/elements/label.html">
									Label

								</a>

								<a class="item" href="/elements/list.html">
									List

								</a>

								<a class="item" href="/elements/loader.html">
									Loader

								</a>

								<a class="item" href="/elements/rail.html">
									Rail

								</a>

								<a class="item" href="/elements/reveal.html">
									Reveal

								</a>

								<a class="item" href="/elements/segment.html">
									Segment

								</a>

								<a class="item" href="/elements/step.html">
									Step

								</a>

							</div>
						</div>
						<div class="item">
							<div class=" header">Collections</div>
							<div class="menu">

								<a class="item" href="/collections/breadcrumb.html">
									Breadcrumb

								</a>

								<a class="item" href="/collections/form.html">
									Form

								</a>

								<a class="item" href="/collections/grid.html">
									Grid

								</a>

								<a class="item" href="/collections/menu.html">
									Menu

								</a>

								<a class="item" href="/collections/message.html">
									Message

								</a>

								<a class="item" href="/collections/table.html">
									Table

								</a>

							</div>
						</div>
						<div class="item">
							<div class=" header">Views</div>
							<div class="menu">

								<a class="item" href="/views/advertisement.html">
									Advertisement

								</a>

								<a class="item" href="/views/card.html">
									Card

								</a>

								<a class="item" href="/views/comment.html">
									Comment

								</a>

								<a class="item" href="/views/feed.html">
									Feed

								</a>

								<a class="item" href="/views/item.html">
									Item

								</a>

								<a class="item" href="/views/statistic.html">
									Statistic

								</a>

							</div>
						</div>
						<div class="item">
							<div class="active  header">Modules</div>
							<div class="menu">

								<a class="item" href="/modules/accordion.html">
									Accordion

								</a>

								<a class="item" href="/modules/checkbox.html">
									Checkbox

								</a>

								<a class="item" href="/modules/dimmer.html">
									Dimmer

								</a>

								<a class="item" href="/modules/dropdown.html">
									Dropdown

								</a>

								<a class="item" href="/modules/embed.html">
									Embed

								</a>

								<a class="item" href="/modules/modal.html">
									Modal

								</a>

								<a class="item" href="/modules/nag.html">
									Nag

								</a>

								<a class="item" href="/modules/popup.html">
									Popup

								</a>

								<a class="item" href="/modules/progress.html">
									Progress

								</a>

								<a class="item" href="/modules/rating.html">
									Rating

								</a>

								<a class="item" href="/modules/search.html">
									Search

								</a>

								<a class="item" href="/modules/shape.html">
									Shape

								</a>

								<a class="item" href="/modules/sidebar.html">
									Sidebar

								</a>

								<a class="active item" href="/modules/sticky.html">
									Sticky

								</a>

								<a class="item" href="/modules/tab.html">
									Tab

								</a>

								<a class="item" href="/modules/transition.html">
									Transition

								</a>

							</div>
						</div>
						<div class="item">
							<div class=" header">Behaviors</div>
							<div class="menu">

								<a class="item" href="/behaviors/api.html">
									API

								</a>

								<a class="item" href="/behaviors/form.html">
									Form Validation

								</a>

								<a class="item" href="/behaviors/visibility.html">
									Visibility

								</a>

							</div>
						</div>

					</div>
				</div>
				<div class="article">
					<script src="/javascript/sticky.js"></script>

					<div class="ui masthead vertical tab segment">
						<div class="ui container">
							<div class="introduction">

								<h1 class="ui header">
        Sticky
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          Sticky content fixes itself to the browser viewport as content is scrolled
        </div>
      </h1>

								<div class="ui hidden divider"></div>

								<div class="ui right floated main menu">
									<a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/modules/sticky.html.eco">
										<i class="edit icon"></i>
									</a>

									<a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Sticky] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Sticky should do this%0A%0A**Result**%0AThe Sticky does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
										<i class="bug icon"></i>
									</a>

									<a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
										<i class="alternate github icon"></i>
									</a>
								</div>
								<div class="ui right floated main menu">
									<a class="music popup icon item" data-content="Play Music">
										<i class="music icon"></i>
									</a>
									<div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
										<i class="world icon"></i>
										<div class="menu">
											<div class="header">Select Language</div>
											<div class="ui icon search input">
												<i class="search icon"></i>
												<input type="text" placeholder="Search languages...">
											</div>
											<div class="scrolling menu">
												<div class="item" data-percent="100" data-value="en" data-english="English">
													<span class="description">English</span> English
												</div>
												<div class="item" data-percent="94" data-value="da" data-english="Danish">
													<span class="description">dansk</span> Danish
												</div>
												<div class="item" data-percent="94" data-value="es" data-english="Spanish">
													<span class="description">Español</span> Spanish
												</div>
												<div class="item" data-percent="34" data-value="zh" data-english="Chinese">
													<span class="description">简体中文</span> Chinese
												</div>
												<div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
													<span class="description">中文 (臺灣)</span> Chinese (Taiwan)
												</div>
												<div class="item" data-percent="79" data-value="fa" data-english="Persian">
													<span class="description">پارسی</span> Persian
												</div>
												<div class="item" data-percent="41" data-value="fr" data-english="French">
													<span class="description">Français</span> French
												</div>
												<div class="item" data-percent="37" data-value="el" data-english="Greek">
													<span class="description">ελληνικά</span> Greek
												</div>
												<div class="item" data-percent="37" data-value="ru" data-english="Russian">
													<span class="description">Русский</span> Russian
												</div>
												<div class="item" data-percent="36" data-value="de" data-english="German">
													<span class="description">Deutsch</span> German
												</div>
												<div class="item" data-percent="23" data-value="it" data-english="Italian">
													<span class="description">Italiano</span> Italian
												</div>
												<div class="item" data-percent="21" data-value="nl" data-english="Dutch">
													<span class="description">Nederlands</span> Dutch
												</div>
												<div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
													<span class="description">Português(BR)</span> Portuguese
												</div>
												<div class="item" data-percent="17" data-value="id" data-english="Indonesian">
													<span class="description">Indonesian</span> Indonesian
												</div>
												<div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
													<span class="description">Lietuvių</span> Lithuanian
												</div>
												<div class="item" data-percent="11" data-value="tr" data-english="Turkish">
													<span class="description">Türkçe</span> Turkish
												</div>
												<div class="item" data-percent="10" data-value="kr" data-english="Korean">
													<span class="description">한국어</span> Korean
												</div>
												<div class="item" data-percent="7" data-value="ar" data-english="Arabic">
													<span class="description">العربية</span> Arabic
												</div>
												<div class="item" data-percent="6" data-value="hu" data-english="Hungarian">
													<span class="description">Magyar</span> Hungarian
												</div>
												<div class="item" data-percent="6" data-value="vi" data-english="Vietnamese">
													<span class="description">tiếng Việt</span> Vietnamese
												</div>
												<div class="item" data-percent="5" data-value="sv" data-english="Swedish">
													<span class="description">svenska</span> Swedish
												</div>
												<div class="item" data-precent="4" data-value="pl" data-english="Polish">
													<span class="description">polski</span> Polish
												</div>
												<div class="item" data-percent="6" data-value="ja" data-english="Japanese">
													<span class="description">日本語</span> Japanese
												</div>
												<div class="item" data-percent="0" data-value="ro" data-english="Romanian">
													<span class="description">românește</span> Romanian
												</div>
											</div>

										</div>
									</div>
								</div>

								<!--       <a href="/module.html" class="ui right floated basic right labeled icon button">
        Learn about Modules
        <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to use."></i>
      </a> -->

								<div class="ui download primary button">
									Download
								</div>
								<div class="ui flowing download basic popup">
									<div class="ui divided equal width relaxed center aligned choice grid">
										<div class="framework column">
											<h4 class="ui center aligned header">UI Framework</h4>
											<div class="ui list">
												<div class="item"><i class="green check icon"></i> Themable</div>
												<div class="item"><i class="green check icon"></i> Build Tools</div>
											</div>
											<div class="ui primary fluid button">Choose</div>
										</div>
										<div class="standalone column">
											<h4 class="ui center aligned header">Standalone</h4>
											<div class="ui list">
												<div class="item">Default Theme</div>
												<div class="item">Precompiled</div>
											</div>
											<div class="ui fluid button basic">Choose</div>
										</div>
									</div>
									<div class="ui divided equal height relaxed center aligned framework grid">
										<div class="column">
											<div class="ui header">Semantic UI</div>
											<a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
												Download ZIP
											</a>
											<a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
											<h4 class="ui header">Package Managers</h4>
											<div class="ui form">
												<div class="field">
													<label>NPM</label>
													<div class="ui fluid input">
														<input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
													</div>
												</div>
												<div class="field">
													<label>Git</label>
													<div class="ui fluid input">
														<input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="ui divided equal height relaxed center aligned standalone grid">
										<div class="column">
											<div class="ui header">Standalone Sticky</div>
											<a class="ui primary button" href="https://github.com/Semantic-Org/UI-Sticky/archive/master.zip">
												Download ZIP
											</a>
											<a class="ui button" href="https://github.com/Semantic-Org/UI-Sticky/">
												View GitHub
											</a>
											<h4 class="ui header">Package Managers</h4>
											<div class="ui form">
												<div class="field">
													<label>Bower</label>
													<div class="ui fluid input">
														<input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-sticky">
													</div>
												</div>
												<div class="field">
													<label>NPM</label>
													<div class="ui fluid input">
														<input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-sticky">
													</div>
												</div>
												<div class="field">
													<label>Git</label>
													<div class="ui fluid input">
														<input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Sticky.git">
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

							</div>
							<div class="advertisement">

								<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>

							</div>

							<div class="ui three item stackable tabs menu">

								<a class="active item" data-tab="examples">Examples</a>

								<a class="item" data-tab="usage">Usage</a>

								<a class="item" data-tab="settings">Settings</a>

							</div>

						</div>
					</div>

					<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
					<div class="bsa-cpc"></div>
					<script>
						(function() {
							if(typeof _bsa !== 'undefined' && _bsa) {
								_bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
									target: '.bsa-cpc',
									align: 'horizontal',
									disable_css: 'true'
								});
							}
						})();
					</script>
					<div class="ui vertical beg transition hidden segment">
						<i class="large red delete link icon"></i>
						<div class="ui red header">
							<i class="disabled warning sign icon"></i>
							<div class="content">
								Want to Support Open Source? Whitelist Your Ad-Blocker.
								<div class="sub header">
									We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
								</div>
							</div>
						</div>
					</div>

					<div class="main ui container">

						<div class="ui active tab" data-tab="examples">

							<h2 class="ui dividing header">Introduction</h2>
							<div class="no example">

								<p>Sticky content stays fixed to the browser viewport while another column of content is visible on the page.</p>
								<p>Although sticky content can be used inside any container, sticky pairs well with
									<a href="/elements/rail.html"><code>ui rail</code></a> because often "stuck" content is used to occupy additional canvas space outside of the main content of a website, making sure follow up links, ads, and other ancillary content remains on screen while engaging the sites main content.</p>

								<div class="ui ignored warning message">
									The following examples may be hidden on small screen sizes. For the best experience, view these examples on a large resolution display.
								</div>
							</div>

							<h2 class="ui dividing header">Examples</h2>

							<div class="sticky example">
								<h4 class="ui header">Sticking to Adjacent Context</h4>
								<p>Sticky content attaches itself to the viewport when it is passed, and remains fixed to the viewport until this fixed content collides with the bottom edge of the passed <code>context</code>. Additional static content can exist above <code>sticky</code> content without affecting its position.</p>

								<div class="code" data-type="javascript">
									$('.ui.sticky') .sticky({ context: '#example1' }) ;
								</div>
								<div class="ui segment" id="example1">
									<div class="left ui rail">
										<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
										<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
										<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
										<div class="ui sticky">
											<h3 class="ui header">Stuck Content</h3>
											<img class="ui wireframe image" src="/images/wireframe/image.png">
										</div>
									</div>
									<div class="right ui rail">
										<div class="ui sticky">
											<h3 class="ui header">Stuck Content</h3>
											<img class="ui wireframe image" src="/images/wireframe/image.png">
										</div>
									</div>
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
								</div>
							</div>

							<div class="pushing example">
								<h4 class="ui header">Pushing</h4>
								<p>Specifying <code>pushing: true</code> will have the viewport "push" the sticky content depending on the scroll direction. When scrolling down content will be stuck to the top of the viewport, but in the opposite direction content is stuck to the bottom of the viewport.</p>
								<div class="code" data-type="javascript">
									$('.ui.sticky') .sticky({ context: '#example2', pushing: true }) ;
								</div>
								<div class="ui segment" id="example2">
									<div class="left ui rail">
										<div class="ui sticky">
											<h3 class="ui header">Stuck Content</h3>
											<img class="ui wireframe image" src="/images/wireframe/image.png">
										</div>
									</div>
									<div class="right ui rail">
										<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
										<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
										<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
										<div class="ui sticky">
											<h3 class="ui header">Stuck Content</h3>
											<img class="ui wireframe image" src="/images/wireframe/image.png">
										</div>
									</div>
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
								</div>
							</div>

							<div class="sticky example">
								<h4 class="ui header">Oversized Content</h4>

								<p>Sticky content that is larger than the viewport will automatically scroll independently from the context, shifting scroll direction at any time will also immediately adjust the scroll position of the fixed content.</p>

								<p>This behavior makes sure users aren't required to navigate all the way to the top of the context element to see content that cant fit on-screen inside the sticky element.</p>

								<div class="code" data-type="javascript">
									$('.ui.sticky') .sticky({ context: '#example3' }) ;
								</div>
								<div class="ui segment" id="example3">
									<div class="left ui rail">
										<div class="ui sticky">
											<h3 class="ui header">Long Stuck Content</h3>
											<div class="ui divided items">
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
												<div class="item">
													<div class="ui tiny image">
														<img src="/images/wireframe/image.png">
													</div>
													<div class="middle aligned content">
														<a class="header">Followup Article</a>
														<div class="meta">
															<span class="author">By <a>Author</a></span>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="right ui rail">
										<div class="ui sticky">
											<h3 class="ui header">Short Stuck Content</h3>
											<img class="ui wireframe image" src="/images/wireframe/image.png">
										</div>
									</div>
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
									<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
								</div>
							</div>

							<div class="inline example">

								<h4 class="ui header">Sticking to Own Context</h4>

								<p>Sticky content without a specified context can also stick itself to its current context, although this may cause overlap issues with content.</p>

								<p>Content that sticks to its own context will adjust its own layout when being "stuck". You can fix layout issues caused by this reflow by adding styles to the next element after a <code>ui fixed sticky</code>

									<div class="code">
										.ui.fixed.sticky + p { margin-top: 39px; }
									</div>

									<div class="code" data-type="javascript">
										$('.ui.sticky') .sticky() ;
									</div>
									<div class="ui segment">
										<div class="ui sticky">
											<div class="ui fluid three item tabular menu">
												<a class="active item">Tab 1</a>
												<a class="item">Tab 2</a>
												<a class="item">Tab 3</a>
											</div>
										</div>
										<div class="ui active tab">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
											<img class="ui wireframe paragraph image" src="/images/wireframe/paragraph.png">
										</div>
									</div>
							</div>

						</div>

						<div class="ui tab" data-tab="usage">

							<h2 class="ui dividing header">Usage</h2>

							<div class="no example">
								<h4 class="ui header">Initializing</h4>
								<p>Sticky is initialized on content that should be stuck to viewport. Most instances require specifying a secondary <code>context</code> which will define the top and bottom bounds of the sticky element. Sticky content must be included inside a containing element. This container can be a
									<a href="/elements/rail.html">ui rail</a> or your own arbitrary container, but should exist parallel to your context.</p>

								<div class="ui warning ignored message">
									Sticky does not work in tables without using <code>table-layout: fixed</code> to prevent automatic resizing with content
								</div>
								<div class="code" data-type="html">
									<div class="ui rail">
										<div class="ui sticky">
											<!-- Any arbitrary content !-->
										</div>
									</div>
									<div id="context">
										<!-- Long flowing text content !-->
									</div>
								</div>
								<div class="code" data-type="javascript">
									$('.ui.sticky') .sticky({ context: '#context' }) ;
								</div>
							</div>
							<div class="no example">
								<h4 class="ui header">Refreshing Cached Values</h4>
								<p>Sticky content caches its current offset on the page and other crucial values on initialization. This prevents it from having to query the DOM on each browser scroll which would drastically reduce performance.</p>
								<p>Sticky uses
									<a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">mutation observers</a> to adjust its position when content is added to the context, and also will automatically recalculate on browser <code>resize</code>, but any other changes to your page that adjust the elements context require you to refresh the sticky's position</p>
								<p>Examples of changes that might affect sticky elements are:</p>
								<div class="ui bulleted ignored list">
									<div class="item">Loading images without specified size</div>
									<div class="item">Setting CSS which adjusts the layout of the page</div>
									<div class="item">Hiding elements using Javascript</div>
								</div>
								<p>Refreshing cached values just requires calling the <code>refresh</code> behavior.</p>
								<div class="ui code">
									// recalculates offsets $('.ui.sticky') .sticky('refresh') ;
								</div>
							</div>

							<div class="no example">
								<h4 class="ui header">Sticky Conditions</h4>
								<p>Sticky content is required to be inside its own <code>position: relative</code> container that is either the sticky context, or <b>shares vertical positioning with the context element</b>.</p>
								<p>You can use <code>ui rail</code> or <code>ui grid</code> column that are in the same row to provide this set-up, or your own custom CSS</p>
								<p>Sticky elements swap between being bound to the edges of their container, or fixed to the edges of the browser viewport</p>
								<table class="ui ignored celled definition table">
									<thead>
										<tr>
											<th></th>
											<th>Class</th>
											<th>Description</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>Fixed Top</td>
											<td>ui fixed top sticky</td>
											<td>Element is fixed to top of viewport</td>
										</tr>
										<tr>
											<td>Fixed Bottom</td>
											<td>ui fixed bottom sticky</td>
											<td>Element is fixed to bottom of viewport</td>
										</tr>
										<tr>
											<td>Bound Top</td>
											<td>ui bound top sticky</td>
											<td>Element is bound to the top of its containing element (usually rail or column)</td>
										</tr>
										<tr>
											<td>Bound Bottom</td>
											<td>ui bound bottom sticky</td>
											<td>Element is bound to the bottom of its containing element (usually rail or column)</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="no example">
								<h4 class="ui header">Adjusting Offset and Padding</h4>
								<p>If you have content fixed to the viewport it might make sense to include a top or bottom offset. An <code>offset</code> will adjust all values so that content does not overlap any content between the top of the browser and the specified value. A <code>bottomOffset</code> will do the same thing for content fixed to the bottom of the viewport.</p>
								<div class="code" data-type="javascript">
									$('.ui.sticky') .sticky({ offset : 50, bottomOffset : 50, context : '#element-to-follow' }) ;
								</div>
							</div>

						</div>

						<div class="ui tab" data-tab="settings">

							<h3 class="ui header">
      Sticky Settings
      <div class="sub header">Settings to configure sticky behavior</div>
    </h3>
							<table class="ui celled sortable definition table segment">
								<thead>
									<th>Setting</th>
									<th class="four wide">Default</th>
									<th>Description</th>
								</thead>
								<tbody>
									<tr>
										<td>pushing</td>
										<td>false</td>
										<td>Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up</td>
									</tr>
									<tr>
										<td>setSize</td>
										<td>true
											<div class="ui label">New in 2.2.11</div>
										</td>
										<td>Sets size of <code>fixed</code> content to match its width before fixing to screen dynamically. This is used because fixed may display block or 100% width content differently than it appears before sticking.</td>
									</tr>
									<tr>
										<td>jitter</td>
										<td>5</td>
										<td>Sticky container height will only be set if the difference between heights of container and context is larger than this jitter value.</td>
									</tr>
									<tr>
										<td>observeChanges</td>
										<td>false</td>
										<td>Whether any change in <code>context</code> DOM should automatically refresh cached sticky positions</td>
									</tr>
									<tr>
										<td>context</td>
										<td>false</td>
										<td>Context which sticky element should stick to</td>
									</tr>
									<tr>
										<td>scrollContext</td>
										<td>window</td>
										<td>Context which sticky should attach <code>onscroll</code> events.</td>
									</tr>
									<tr>
										<td>offset</td>
										<td>0</td>
										<td>Offset in pixels from the top of the screen when fixing element to viewport</td>
									</tr>
									<tr>
										<td>bottomOffset</td>
										<td>0</td>
										<td>Offset in pixels from the bottom of the screen when fixing element to viewport</td>
									</tr>
								</tbody>
							</table>

							<h4 class="ui header">Callbacks</h4>
							<p>Callbacks specify a function to occur after a specific behavior.</p>

							<table class="ui celled sortable definition table segment">
								<thead>
									<tr>
										<th class="four wide"></th>
										<th>Context</th>
										<th>Description</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>onReposition</td>
										<td>$module</td>
										<td>Callback when element is repositioned from layout change</td>
									</tr>
									<tr>
										<td>onScroll</td>
										<td>$module</td>
										<td>Callback when <code>requestAnimationFrame</code> fires from scroll handler.</td>
									</tr>
									<tr>
										<td>onStick</td>
										<td>$module</td>
										<td>Callback when element is fixed to page</td>
									</tr>
									<tr>
										<td>onUnstick</td>
										<td>$module</td>
										<td>Callback when element is unfixed from page</td>
									</tr>
									<tr>
										<td>onTop</td>
										<td>$module</td>
										<td>Callback when element is bound to top of parent container</td>
									</tr>
									<tr>
										<td>onBottom</td>
										<td>$module</td>
										<td>Callback when element is bound to bottom of parent container</td>
									</tr>
								</tbody>
							</table>

							<h3 class="ui header">
      DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
							<table class="ui celled sortable definition table segment">
								<thead>
									<th>Setting</th>
									<th class="six wide">Default</th>
									<th>Description</th>
								</thead>
								<tbody>
									<tr>
										<td>namespace</td>
										<td>sticky</td>
										<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
									</tr>
									<tr>
										<td>className</td>
										<td>
											<div class="code">
												className : { bound : 'bound', fixed : 'fixed', supported : 'native', top : 'top', bottom : 'bottom' }
											</div>
										</td>
										<td>Class names used to attach style to state</td>
									</tr>
								</tbody>
							</table>

							<div class="ui horizontal divider"><i class="icon setting"></i></div>

							<h3 class="ui header">
      Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>

							<table class="ui celled sortable definition table segment">
								<thead>
									<th>Setting</th>
									<th class="four wide">Default</th>
									<th>Description</th>
								</thead>
								<tbody>
									<tr>
										<td>name</td>
										<td>Sticky</td>
										<td>Name used in debug logs</td>
									</tr>
									<tr>
										<td>silent</td>
										<td>False</td>
										<td>Silences all console output including error messages, regardless of other debug settings.</td>
									</tr>
									<tr>
										<td>debug</td>
										<td>False</td>
										<td>Provides standard debug output to console</td>
									</tr>
									<tr>
										<td>performance</td>
										<td>True</td>
										<td>Provides standard debug output to console</td>
									</tr>
									<tr>
										<td>verbose</td>
										<td>True</td>
										<td>Provides ancillary debug output to console</td>
									</tr>
									<tr>
										<td>errors</td>
										<td colspan="2">
											<div class="code">
												error : { container : 'Sticky element must be inside a relative container', visible : 'Element is hidden, you must call refresh after element becomes visible', method : 'The method you called is not defined.', invalidContext : 'Context specified does not exist', elementSize : 'Sticky element is larger than its container, cannot create sticky.' }
											</div>
										</td>
									</tr>
								</tbody>
							</table>

						</div>

					</div>
				</div>
			</div>
			<div class="ui black inverted vertical footer segment">
				<div class="ui center aligned container">
					<div class="ui stackable inverted grid">
						<div class="three wide column">
							<h4 class="ui inverted header">Community</h4>
							<div class="ui inverted link list">
								<a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
								<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
								<a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
								<a class="item" href="/cla.html" target="_blank">CLA</a>
							</div>
						</div>
						<div class="three wide column">
							<h4 class="ui inverted header">Network</h4>
							<div class="ui inverted link list">
								<a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
								<a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
								<a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
								<a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
							</div>
						</div>
						<!--    <div class="three wide column">
        <h4 class="ui inverted header">Learn</h4>
        <div class="ui inverted link list">
          <a href="#" class="disabled item">Example Layouts</a>
          <a href="#" class="disabled item">The Project</a>
          <a href="#" class="disabled item">Roadmap</a>
          <a href="#" class="disabled item">About the Author</a>
        </div>
      </div> -->
						<div class="seven wide right floated column">
							<h4 class="ui inverted teal header">Help Preserve This Project</h4>
							<p> Support for the continued development of Semantic UI comes directly from the community.</p>
							<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
								<input type="hidden" name="cmd" value="_s-xclick">
								<input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
								<button type="submit" class="ui large teal button">Donate Today</button>
							</form>
						</div>
					</div>
					<div class="ui inverted section divider"></div>
					<img src="/images/logo.png" class="ui centered mini image">
					<div class="ui horizontal inverted small divided link list">
						<a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
					</div>
				</div>
			</div>

		</div>

		<div class="ui basic language modal">
			<i class="close icon"></i>
			<div class="header">The <span class="name"></span> Translation Needs Your Help</div>
			<div class="image content">
				<div class="middle aligned image">
					<i class="world icon"></i>
				</div>
				<div class="description">
					<p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
					<div class="ui inverted indicating progress">
						<div class="bar"></div>
					</div>
					<p>We need your help to make Semantic available to people who speak your language.</p>
					<p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
					</p>
				</div>
			</div>
			<div class="actions">
				<div class="ui inverted cancel button">No Thanks</div>
				<a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
					<i class="mail icon"></i> Help Translate
				</a>
			</div>
		</div>

		<div class="ui basic chinese modal">
			<i class="close icon"></i>
			<div class="header">Would you like to visit the mirror site?</div>
			<div class="image content">
				<div class="middle aligned image">
					<i class="question icon"></i>
				</div>
				<div class="description">
					<p>Semantic is available at
						<a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
					</p>
				</div>
			</div>
			<div class="actions">
				<div class="ui inverted red cancel button">No Thanks</div>
				<a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
					<i class="mail icon"></i> Yes, take me to the mirror
				</a>
			</div>
		</div>
		<div class="ui demo page dimmer">
			<div class="content">
				<div class="center">
					<h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
				</div>
			</div>
		</div>
		<script>
			window.less = {
				async: true,
				environment: 'production',
				fileAsync: false,
				onReady: false,
				useFileCache: true
			};
		</script>

		<script src="../resources/libs/less.min.js"></script>

	</body>

</html>